<template>
<div class='chart-box'>
   <div class="chart-row" v-for="(chartdata,index) in filterEmptyChartlist" :key="index">
       <div class="chart-column" v-for="(chart,index) in chartdata" :key="index">
            <chart :cData="chart" :cBorderColor="borderColorActive"/>
       </div>
   </div>
</div>
</template>

<script>
import chart from '@/components/VCharts/chart'
export default {
   components: {
       chart
   },
   props:{
       chartlist:{
            type:Array,
            default:()=>{
                return []
            }
       },
       borderColorActive:{
           type:Number,
           default:0
       }
   },
   computed:{
       filterEmptyChartlist(){
           let temp = []
           // 遍历行
           this.chartlist.map((row, ridx)=>{
                // let inner = []
                let curRow = row.filter(col=>col[0].data.rows.length > 0)
                if(curRow.length>0){
                    temp.push(curRow)
                }
            })
           return temp
       }
   },
   mounted(){

   }
}
</script>
<style lang='stylus' scoped>
.chart-box
    width 100%
    height 100%
    // display flex
    // flex-direction column
    & > .chart-row
        // ~~~~~~~~~竖向撑满
        // flex 1
        // ~~~~~~~~~
        height 32%
        width 100%
        box-sizing border-box
        margin-top 15px
        // ~~~~~~横向
        display flex
        flex-direction row
        align-items center
        &:first-child
            margin-top 0

        & > .chart-column
        // ~~~~~~横向
            flex 1
            height 100%
            background: linear-gradient(to right,rgba(62,73,103,0.7) , rgba(48,58,88,1))
            -webkit-box-shadow 8px 8px 8px rgba(0,0,0,0.5)
            box-shadow 8px 8px 8px rgba(0,0,0,0.5)
            margin-right 5px
            &:last-child
                margin-right 0
</style>